<template>
  <div style="margin-top: 40px">
    <!--<el-button @click="addArticle()">添加文章</el-button>-->
    <div class="articles-area">
      <el-card style="text-align: left">
        <div v-for="article in articles" :key="article.id">
          <div style="float:left;width:75%;height: 100px;">
            <router-link class="article-link" :to="{path:'/post/Article',query:{id: article.id}}"><span style="font-size: 20px"><strong>{{article.articleTitle}}</strong></span></router-link>
            <el-divider></el-divider>
          </div>
        </div>
      </el-card>
    </div>
    <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "MyPost",
  data () {
    return {
      articles: [
        {
          id:"1",
          articleTitle:"参商",
        },{
          id:"2",
          articleTitle:"玻璃",
        },
        {
          id:"3",
          articleTitle:"爱随山",
        },{
          id:"4",
          articleTitle:"哈哈哈",
        },
      ],
      pageSize: 4,
      total: 6
    }
  },
  /*mounted () {
    this.loadArticles()
  },*/
  methods: {
    loadArticles () {
      var _this = this
      this.$axios.get('/article/' + this.pageSize + '/1').then(resp => {
        if (resp && resp.data.code === 200) {
          _this.articles = resp.data.result.content
          _this.total = resp.data.result.totalElements
        }
      })
    },
    handleCurrentChange (page) {
      var _this = this
      this.$axios.get('/article/' + this.pageSize + '/' + page).then(resp => {
        if (resp && resp.data.code === 200) {
          _this.articles = resp.data.result.content
          _this.total = resp.data.result.totalElements
        }
      })
    }
  }
}
</script>

<style scoped>
.articles-area {
  width: 900px;
  height: 450px;
  margin-left: auto;
  margin-right: auto;
}

.article-link {
  text-decoration: none;
  color: #606266;
}

.article-link:hover {
  color: #409EFF;
}
</style>
